<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
       <title>Fade-in test</title>
       <style type="text/css">
               ul {
                       list-style-type: none;
                       margin: 0;
                       padding: 0;
               }
               li {
                       background-color: #ccc;
                       border-bottom: 1px solid #252;
                       margin: 1em;
                       padding: 0.5em;
               }
               .slide.in {
                       -webkit-transform: translateX(0);
                       -webkit-animation-name: slideinfromright;
               }
               .slide.out {
               -webkit-transform: translateX(-100%);
                   -webkit-animation-name: slideouttoleft;
               }

               @-webkit-keyframes slideinfromright {
               from { -webkit-transform: translateX(-100%); }
               to { -webkit-transform: translateX(0); }
               }
               @-webkit-keyframes slideouttoleft {
               from { -webkit-transform: translateX(0); }
               to { -webkit-transform: translateX(-100%); }
               }
               .in, .out {
                       -webkit-animation-timing-function: ease-in-out;
                       -webkit-animation-duration: 1350ms;
               }
               #content {
                       width: 100px;
                       height: 50px;
                       border: solid 1px #262;
                       text-align: center;
                       font-size: 2em;
                       background-color: #cfc;
               }
       </style>

       <script type="text/javascript" src="jquery.js"></script>

       <script type="text/javascript">
               $(document).ready(function () {
                       $("li").click(function () {
                               var prn = $(this).parent();
                               $("<li>ezjaeljzkale</li>"
).hide().prependTo(prn).slideDown("slow");
                       });

                       $("#buu").click(function (event) {
                               event.preventDefault();
                               $("#content").toggleClass("in out");
                               $("ul").toggleClass("out in");
                       });
               });
       </script>
</head>
<body>
       <a id="buu" href="#">Click Me!</a>
       <ul class="slide in">
               <li>One, two three</li>
               <li>Four, five, seven</li>
       </ul>

       <div id="content" class="slide in">lorem</div>

</body>
</html>
